<!DOCTYPE html>
<html>
<head>

	<title>Density</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0">
	<link href="../images/favicon.ico" rel="icon" type="image/x-icon" >
	
	<link href="../css/main.css" type="text/css" rel="stylesheet" />
	<link href="../css/1140.css" type="text/css" rel="stylesheet" />
	
	<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
	
	<link href="../plugins/jquery.jqplot.min.css" type="text/css" rel="stylesheet" />
	<script src="../plugins/jquery.jqplot.min.js" type="text/javascript"></script>
	
	<script src="../plugins/jqplot.barRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>

	<script src="../plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script>
	<script src="../plugins/jqplot.donutRenderer.min.js" type="text/javascript"></script>
	
	<link href="act22.css" type="text/css" rel="stylesheet" />
	<script src="act22.js" type="text/javascript"></script>

</head>
<body>

	<div class="container16">

		<div class="row">
		
			<div class="data sec column5">
				<h1>Data</h1>
				<div class="dataRowTitle">
					<div class="mat">Material</div>
					<div class="val">Value</div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
				<div class="dataRow">
					<div class="mat"><input class="material" type="text"></div>
					<div class="val"><input class="value" type="text"></div>
				</div>
			</div>
			
			<div class="labels sec column3">
				<h1>Graph Type</h1>
				<div class="graphType pie active">
					<img src="pie.png" />
					Pie Chart
				</div>
				<div class="graphType bar">
					<img src="bar.jpg" />
					Bar Graph
				</div>
				<h1>Labels</h1>
				<div class="dataRow">
					<div class="whole">Title:</div>
					<div class="whole"><input type="text" class="title"/></div>
				</div>
				<div class="barLabels">
					<div class="dataRow">
						<div class="whole">X-Axis:</div>
						<div class="whole"><input type="text" class="xaxis"/></div>
					</div>
					<div class="dataRow">
						<div class="whole">Y-Axis:</div>
						<div class="whole"><input type="text" class="yaxis"/></div>
					</div>
				</div>
			</div>
			
			<div class="graph sec column8">
				<h1>Graph</h1>
				<div class="preGraph">
					<button class="go bigGo">Graph it!</button>
				</div>
				<div class="postGraph hideHeight">
					
					<div id="chart1" style="height:300px; width:500px;"></div>
					<button class="go smGo">Re-graph</button>
				</div>
			</div>
			
		</div>
		
		<div class="row">
			<a href="extra.php"><button class="">Next Graph</button></a>
			<a href="https://docs.google.com/spreadsheet/ccc?key=0AjVk2Rng8IhIdERCYlNXUGZwNTdGbDZWSDBlVEh4eVE&usp=sharing">All Tables</a>
		</div>
	
	</div>
	
	
	
	<script>
	
	</script>

</body>
</html>